<template>
  <div class="box verdana">
    <div class="center">
      <!-- 标题区域 -->
      <div class="top">—— 共享资源 ——</div>
      <div class="bottom">
        <div
          class="xiao"
          v-for="(item, index) in list"
          :key="index"
          @click="resources(index)"
        >
          <div class="left">
            <img :src="item.img" alt="" />
          </div>
      
          <div class="right"    :style="`font-size:${index == 3 ? '.18rem' : ''}`" >
         
            {{ item.text }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          img: "",
          text: "大项目",
        },
        {
          img: "",
          text: "新产品",
        },
        {
          img: "",
          text: "商企库",
        },
        {
          img: "",
          text: "美 + 咖",
        },
        {
          img: "",
          text: "生命篇",
        },
        {
           img: "",
          text: "人才库",
        },
      ],
    };
  },
  methods: {
    //标题跳转
    resources(i) {
      if (i == 0) {
        this.$router.push("/large");
      } else if (i == 1) {
        this.$router.push("/product");
      } else if (i == 2) {
        this.$router.push("/commpage");
      } else if (i == 3) {
        this.$router.push("/coffeetwo/coffeethree");
      } else if (i == 4) {
        this.$router.push("/lifttwo");
      } else if (i == 5) {
        this.$router.push("/persontwo/personthree");
      }
    },
  },
};
</script>

<style scoped >
.box {
  width: 100%;
  height: 1.23rem;
  margin-top: 0.2rem;
  display: flex;
  
  justify-content: center;
  border-bottom: 2px solid #908f8f;
}
/* 版心区域 */
.center {
  width: 95%;
  height: 100%;
}
/* 标题区域 */
.top {
  height: 0.3rem;
  line-height: 0.3rem;
  text-align: center;
  font-size: 0.22rem;
}

/* 底部区域 */
.bottom {
  width: 100%;
  height: 0.8rem;
  /* margin-top: 0.071rem; */
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
/* 小盒子的内盒 */
.xiao {
  width: 31%;
  height: 0.25rem;
  font-size: 20px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* 左边图标 */
.left {
  width: 20%;
  height: 100%;
  margin: 0.03rem 0.04rem 0 0;
}
.left img {
  width: 0.22rem;
  height: 0.22rem;
  margin-top: 0.15rem;
}
/* 右边区域 */
.right {
  width: 80%;
  height: 100%;
  margin: 0.27rem 0 0 0;
  font-size: 0.2rem;
}
</style>